
 {% extends "base.html" %}

 {% block navbar %}{% endblock %}
 {% block content %}
 <!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>根据学号来查询学习基本信息及选课情况</h1>
{% if not msg %}
{#    判断是否由msg这个参数，或者判断其值，没有的话则执行这段代码#}
    <form method="post" action="{% url 'student:select' %}">
        {% csrf_token %}
        学生学号：<input type="text" name="stu_id" placeholder={{ id }}><br>
        <input class="bc" type="submit" value="查询">
    </form>
{% else %}
    <ul>
        <li>学号： {{ stu_id }}</li>
        <li>姓名： {{ stu_name }}</li>
        <li>电话： {{ stu_phone }}</li>
        <li>地址： {{ stu_addr }}</li>
        <li>院系： {{ stu_faculty }}</li>
        <li>专业： {{ stu_major }}</li>
    </ul>
    <hr>
    <ul>
        {% for k, v in course_data.items %}
            <li>{{ k }}: {{ v }}</li>
        {% endfor %}
    </ul>
{% endif %}
</body>
</html>
 -->
 <style>
 
    
body {
    
    margin: -0.4cm auto;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 15px 0;
    background-image: url("../static/image/s.jpg");
    background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
}
#head {
    opacity:0.85;
    width: 950px;
    padding: 25px 15px 15px 15px;
    margin: 0 auto;
    font-size: 1.4em;
    background: #3f4b4a;
}

#title {
    opacity:0.9;
    padding: 0;
    margin: 0;
    font-size: 1.5em;
    color: #FFFFFF;
}

#title a:link,
#title a:visited {
    background: #3f4b4a;
    text-decoration: none;
}

#date {
    float: right;
    padding: 10px 10px;
    height: 40px;
    color: #FFFFFF;
    text-align: right;
}

#content {
    opacity:0.95;
     width: 950px;
    padding: 0 15px 1cm 15px;
    margin: 0 auto;
       background: #f5f5f5;
    color: #408080;
}

#content h1 {
    color: #74A8F5;
    /* font-family: "Trebuchet MS", Arial, Helvetica; */
    padding: 30px 0 0 0;
    margin: 0px 0 15px 0;
    font-size: 1.5em;
}

.form_table {

    text-align: center;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.form_table th {
    opacity:0.9;
    background-color: #74A8F5;
    color: #FFFFFF;
    /*这个就可以将字体设置成白色了，将总体设成白色后再加背景就凸显出字了*/
}

.form_table td {
    background-color: #F0F8FF;
    opacity:0.9;
}

#footer {
    opacity:0.9;
    width: 950px;
    background: url(img/footer.gif) no-repeat center bottom;
    background: #3f4b4a;
    padding: 0 10px 13px 20px;
    margin: 0 auto;
}

#footer #footer_bg {
   
    padding: 15px 15px 15px 15px;
    color: #FFFFFF;  font-size: 1.4em;
}


 </style>
 <body>
 
     <div id="wrap">
         <div id="head">
             <span id="title">
                 <a href="#">模糊查询结果</a>
             </span>
             <span id="date">
                 2020/09/15
             </span>
         </div>
         <div id="content">
             <h1>
                <a href="{% url 'student:index' %}">点击恢复首页</a><br>
             </h1>
             <form id="i_from1" action="/select/" method="post" style="margin: 1cm 0 0 0cm;">
                 {% csrf_token %}
                         <table  cellspacing="7"  > 
                             <tr>
                                 <td><input type="text" name="stu_id" id="shuru" /></td>
                                 <td><input type="submit" name="usertype" value="查找" checked />
                             </tr>
                         </table>
             </form>
             
                 <table border="0" cellspacing="2" cellpadding="5" class="form_table">
                     <tr>
                         <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp学号&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                         <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp姓名&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                         <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp手机&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                         <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp地址&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                         <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp院系&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                         <th>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp专业&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
                         <th>&nbsp&nbsp删除&nbsp&nbsp</th>
                         <th>&nbsp&nbsp修改&nbsp&nbsp</th>
                     </tr>
                     {% for status in statuses %}
                     <tr>
                         <td>{{ status.stu_id }}</td>
                         <td>{{ status.stu_name }}</td>
                         <td>{{ status.stu_phone }}</td>
                         <td>{{ status.stu_addr }}</td>
                         <td>{{ status.stu_faculty }}</td>
                         <td>{{ status.stu_major }}</td>
                         <td>
                              <form method="post" action="/delete/">
                                 {% csrf_token %}
                                 <input type="hidden" name="stu_id" value={{ status.stu_id }}>
                                 <input type="submit" onclick="return confirm('确认删除？');" value="删除">
                                 </form>
                             </td>
                             <td>
                                 <form  method="post" action="/update/">
                                     {% csrf_token %}
                                    </form><button data-toggle='modal' data-target='#myModal'onclick=edit("{{ status.stu_id }}")> 修改</button>
                                     </form>
                         </td>
                        
                     </tr>
                     
                     {% endfor %}
                 </table>
            
         </div>

         <form method="post" action="/update/" class="form-horizontal" role="form" id="myForm">
            {% csrf_token %}
            <div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
                <div class="modal-dialog">
                    <!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
                    <div class="modal-content">
                        <!--  显示模态框白色背景，所有内容都写在这个div里面  -->
    
                        <div class="btn-info modal-header">
                            <!--  模态框标题  -->
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <!--  关闭按钮  -->
                            <h4>您好，请修改</h4>
                            <!--  标题内容  -->
                        </div>
    
                        <div class="modal-body">
                            <!--  模态框内容，我在此处添加一个表单 -->
                            <form class="form-horizontal" role="form" method="post" action="Updata">
                                <div class="form-group">
                                    <label for="uname" class="col-sm-2 control-label">学号</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="stu_id"readonly="readonly" class="form-control well" id="text1" placeholder="请输入学号"/>
                                    </div>
                                </div>
                                 <div class="form-group">
                                    <label for="upwd" class="col-sm-2 control-label">姓名</label>
                                    <div class="col-sm-9">
                                        <input type="text" id = "stu_name"name="stu_name" class="form-control well" placeholder="请输入姓名"/>
                                    </div>
                                </div>
                                 <div class="form-group">
                                    <label for="upwd" class="col-sm-2 control-label">邮箱</label>
                                    <div class="col-sm-9">
                                        <input type="text"id = "stu_phone" name="stu_phone" class="form-control well" placeholder="请输人邮箱"/>
                                    </div>
                                    <div id="ts"></div>
    
                                </div>
                                <div class="form-group">
                                    <label for="upwd" class="col-sm-2 control-label">学生地址</label>
                                    <div class="col-sm-9">
                                        <input type="text"id = "stu_addr" name="stu_addr" class="form-control well" placeholder="请输入地址"/>
                                    </div>
                                </div>
                                 <div class="form-group">
                                    <label for="upwd" class="col-sm-2 control-label">学生院系</label>
                                    <div class="col-sm-9">
                                        <input type="text" id = "stu_faculty" name="stu_faculty" class="form-control well" placeholder="请输入院系"/>
                                    </div>
                                </div>
                                 <div class="form-group">
                                    <label for="upwd" class="col-sm-2 control-label">学生专业</label>
                                    <div class="col-sm-9">
                                        <input type="text"id = "stu_major" name="stu_major" class="form-control well" placeholder="请输入专业"/>
                                    </div>
                                    
                                </div>
                                 <div class="modal-footer">
                            <!--  模态框底部样式，一般是提交或者确定按钮 -->
                            <input type="hidden" name="id" id="text1">
                          
                            <button type="submit" class="btn btn-info" onclick="return checkupdate()" >修改并通知</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                            </form>
                        </div>
                    </div><!-- /.modal-content -->
                </div>
            </div> <!-- /.modal -->
        </form>
        
                           
         <div id="footer">
             <div id="footer_bg">
                 Liugm@xaut.edu.cn
             </div>
         </div>
     </div>
 
     <script type="text/javascript">
    

        function edit(id){
        
            $("#text1").val(id)
        }    

    
        var key=1;
      
    $("#stu_phone").blur(function(){
    	
        console.log($("#stu_phone").val())
    	var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		if(reg.test($("#stu_phone").val())){
            $("#ts").html("√");
            $("#ts").css("color","green");
            key=1;
		}else{
            $("#ts").html("格式不正确！");
            key =0;
            $("#ts").css("color","red");
		}
            });
   
        function checkupdate() {
         if ($("#stu_name").val() == "") {
            alert("请输入姓名!");

            return false;
        } else if ($("#stu_major").val()== "") {
            alert("请输入专业");

            return false;
        } else if ($("#stu_faculty").val() == "") {
            alert("请输入院系!");
            return false;
        } 
        else if ($("#stu_phone").val() == "") {
            alert("请输入邮箱!");
            return false;
        }else if(key==0){

        	return false;
        }
        else return true;

        } 
    </script>
 
 <!-- 
     <a href="/student/login/">登录</a><br> -->
 
 </body>
 {% endblock %}